<!--学生端知识账本-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>知识账本</title>
		<link rel="stylesheet" href="../../css/base.css">
		<link rel="stylesheet" href="../../css/knowledgebook.css">
		<style>
			.top_div {
				background: url(../../image/img_knowledgeTitle.png) no-repeat;
				background-size: 100%;
				height: 200px
			}
			.one_img {
				background: url(../../icon/icon_one_img.jpg)
			}
			.two_img {
				background: url(../../icon/icon_two_img.jpg)
			}
			.three_img {
				background: url(../../icon/icon_three_img.jpg)
			}
			select {
				padding: 1px 15px;
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				background: url("../../image/icon_time.png") no-repeat scroll 97% center transparent;
				border: solid 1px #18b4ed !important;
				background-size: 20px;
			}
		</style>
	</head>
	<body>
		
		<div class="base_navigation_bar  ">
			
			<a class='base_left_item' href='#' onclick='backClick()'> <img class='base_back_icon' src='../../image/icon_bgback.png' alt=''> </a>
		</div>
		<div class="main">
			<div class="top_div"></div>
			<div class="one_Chart_div" >
				<div class="one_Chart_top" >
					<ul>
						<li>
							<img src="../../icon/icon_course_num.png" />
							<p class="chart_top_title">
								10门
							</p>
							<p class="chart_top_info">
								课程
							</p>
						</li>
						<li>
							<img src="../../icon/icon_average_score.png" />
							<p class="chart_top_title">
								88分
							</p>
							<p class="chart_top_info">
								平均成绩
							</p>
						</li>
						<li>
							<img src="../../icon/icon_study_time.png" />
							<p class="chart_top_title">
								16小时
							</p>
							<p class="chart_top_info">
								学习时长
							</p>
						</li>
					</ul>
				</div>
				<div class="one_Chart_middle" >
					<p class="chart_title">
						课程学习统计
					</p>
					<p class="chart_info">
						共学习8门课程,2门mocc课程,6门自由课程。
						<br/>
						学习资源最多的是互动资源,参与活动最多的是作业
					</p>
					<div class="one_Chart"id="Learning_Statistics_Chart"></div>
				</div>
				<div class="one_Chart_bottom" >
					<p class="chart_title">
						学习结果统计
					</p>
					<p class="chart_info">
						学习进度最快的是《课程名称1》,达到了100%
						<br/>
						考核成绩最高的是《课程名称1》考核,得分是98分,最低的是《课程名称2》考核,得分是96分,
					</p>
					<div class="one_Chart_two"id="Result_Statistics_Chart"></div>
				</div>
			</div>
			<div class="two_Chart_div" id="two_Chart">
				<div class="two_Chart_top" >
					<div class="month_time_chart" id="month_time_chart"></div>
					<div class="month_time_info">
						<ul>
							<li class="one_img">
								<p class="chart_title">
									总学习时长
								</p>
								<p class="chart_info">
									12小时
								</p>
							</li>
							<li class="two_img">
								<p class="chart_title">
									日均学习时长
								</p>
								<p class="chart_info">
									12小时
								</p>
							</li>
							<li class="three_img">
								<p class="chart_title">
									打败其他同学
								</p>
								<p class="chart_info">
									40%
								</p>
							</li>
						</ul>
					</div>
				</div>
				<div class="two_Chart_middle" >
					<p class="chart_left_title">
						<span style="color: red;margin-right: 4px">10:00~11:00</span>是学生学习高峰时段,累计学习<span style="color: red;margin-left: 4px">12</span>小时
					</p>
					<div class="two_Chart_middle_chart" id="Learning_time_chart"></div>
				</div>
			</div>
			<div class="CourseAnalysis_div" id="four_Chart">
				<div class="CourseAnalysis_top_div">
					<div class="CourseAnalysis_top_title">
						<!--<div class="hrLineDiv">
						<hr class="hrLine hrLine_outside right5" />
						<hr class="hrLine hrLine_inside" />
						<span>学习过程分析</span>
						<hr class="hrLine hrLine_inside" />
						<hr class="hrLine hrLine_outside left5" />
						</div>-->
						<div class='clearfix fx-div-style' >
							<div class="fx-life-stye life33">
								<div class="line-right10"></div>
							</div>
							<div class="life33">
								学习分析过程
							</div>
							<div class="fx-life-stye life33">
								<div class="line-left10"></div>
							</div>
						</div>
					</div>
					<div class="CourseAnalysis_top_select">
						<div class="weui_dialog_bd">
							<div data-role="fieldcontain" class=" " id="">
								<label>选择课程:</label>
								<select class="weui_select"  style="float: left;margin-left: 1em" id="selectBar"></select>
							</div>
						</div>
					</div>
				</div>
				<div class="CourseAnalysis_chart_div">
					<div class="one_Chart_top" >
						<div class="region">
							<div class="one_div " >
								<img src="../../icon/icon_course_progress.png" />
								<p class="CourseAnalysis_chart_title">
									50%
								</p>
								<p class="CourseAnalysis_chart_info">
									学习进度
								</p>
							</div>
						</div>
						<div class="region">
							<div class="one_div">
								<img src="../../icon/icon_course_test.png" />
								<p class="CourseAnalysis_chart_title">
									88分
								</p>
								<p class="CourseAnalysis_chart_info">
									课程考核
								</p>
							</div>
						</div>
						<div class="region">
							<div class="one_div">
								<img src="../../icon/icon_course_time.png" />
								<p class="CourseAnalysis_chart_title">
									6小时
								</p>
								<p class="CourseAnalysis_chart_info">
									课程
								</p>
							</div>
						</div>
					</div>
					<div class="CourseAnalysis_left_title top_10"  >
						出勤情况
					</div>
					<div class="Attendance_div">
						<p class="chart_title">
							老师一共发起20次签到,出勤5次,未出勤15次
						</p>
						<div  class="Attendance_Chart_div" id="Attendance_Chart"></div>
					</div>
					<div class="CourseAnalysis_left_title top_10"  >
						课堂活跃度
					</div>
					<div class="Classroom_div">
						<p class="chart_title padding_abscissa_5">
							教师发起<span class="red">30</span>次活动,总共参与<span class="red">28次</span>,表现最活跃的是互评,活跃度最高的一天是<span class="red">6月18日</span>
						</p>
						<div  class="Classroom_OneChart_div" id="Classroom_OneChart"></div>
					</div>
					<div class="Classroom_div">
						<p class="chart_title padding_abscissa_5"></p>
						<div  class="Classroom_TwoChart_div top_10" id="Classroom_TwoChart"></div>
					</div>
					<div class="Classroom_div">
						<div class="segment-content">
							<div id="selectBar" class="row hightitem tabbar" >
								<div class="col base_dark_grey base_content_font" id="col1" tapmode onclick="tabswitch(1)">
									最近7次
									<div class="indicator-super-div">
										<div class="indicator" id="indicator1"></div>
									</div>
								</div>
								<div class="col base_dark_grey base_content_font"  id="col2" tapmode onclick="tabswitch(2)">
									最近15次
									<div class="indicator-super-div">
										<div class="indicator" id="indicator2"></div>
									</div>
								</div>
								<div class="col base_dark_grey base_content_font"  id="col3" tapmode onclick="tabswitch(3)">
									最近30次
									<div class="indicator-super-div">
										<div class="indicator" id="indicator3"></div>
									</div>
								</div>
								<div class="col base_dark_grey base_content_font"  id="col4" tapmode onclick="tabswitch(4)">
									全部
									<div class="indicator-super-div">
										<div class="indicator" id="indicator4"></div>
									</div>
								</div>
							</div>
						</div>
						<div  class="Classroom_ThreeChart_div" id="Classroom_ThreeChart"></div>
					</div>
					<div class="CourseAnalysis_left_title top_10"  >
						学习态度
					</div>
					<div class="LearningAttitude_div">
						<div class="Learning_OneChart">
							<div class="segment-content">
								<div id="selectBar" class="row hightitem tabbar" >
									<div class="col2 base_dark_grey base_content_font" id="col25" tapmode onclick="tabswitch2(5)">
										最近7天
										<div class="indicator-super-div">
											<div class="indicator2" id="indicator25"></div>
										</div>
									</div>
									<div class="col2 base_dark_grey base_content_font"  id="col26" tapmode onclick="tabswitch2(6)">
										最近15天
										<div class="indicator-super-div">
											<div class="indicator2" id="indicator26"></div>
										</div>
									</div>
									<div class="col2 base_dark_grey base_content_font"  id="col27" tapmode onclick="tabswitch2(7)">
										最近30天
										<div class="indicator-super-div">
											<div class="indicator2" id="indicator27"></div>
										</div>
									</div>
									<div class="col2 base_dark_grey base_content_font"  id="col28" tapmode onclick="tabswitch2(8)">
										全部
										<div class="indicator-super-div">
											<div class="indicator2" id="indicator28"></div>
										</div>
									</div>
								</div>
							</div>
							<div  class="Learning_OneChart_div" id="Learning_OneChart"></div>
							<div class="month_time_info">
								<ul>
									<li class="one_img">
										<p class="chart_title">
											总学习时长
										</p>
										<p class="chart_info">
											12小时
										</p>
									</li>
									<li class="two_img">
										<p class="chart_title">
											日均学习时长
										</p>
										<p class="chart_info">
											12小时
										</p>
									</li>
									<li class="three_img">
										<p class="chart_title">
											打败其他同学
										</p>
										<p class="chart_info">
											40%
										</p>
									</li>
								</ul>
							</div>
						</div>
						<div  class="Learning_TwoChart" >
							<p class="chart_title padding_abscissa_5">
								<span>作业学习时间最多,占总时长的40%</span>
								<span>测验学习时间最少,占总时长的10%</span>
							</p>
							<div  class="Learning_TwoChart_div" id="Learning_TwoChart"></div>
						</div>
						<div  class="Learning_ThreeChart" >
							<p class="chart_title padding_abscissa_5">
								<span>一共10个作业，提交5个,未提交5个</span>
							</p>
							<div  class="Learning_ThreeChart_div" id="Learning_ThreeChart"></div>
						</div>
					</div>
					<div class="CourseAnalysis_left_title top_10"  >
						学习效果
					</div>
					<div class="LearningEffect_div ">
						<div class="one_Chart_top" >
							<div class="region">
								<div class="one_div " >
									<img src="../../icon/icon_course_progress.png" />
									<p class="CourseAnalysis_chart_title">
										50分
									</p>
									<p class="CourseAnalysis_chart_info">
										作业成绩
									</p>
								</div>
							</div>
							<div class="region">
								<div class="one_div">
									<img src="../../icon/icon_course_test.png" />
									<p class="CourseAnalysis_chart_title">
										88分
									</p>
									<p class="CourseAnalysis_chart_info">
										理论成绩
									</p>
								</div>
							</div>
							<div class="region">
								<div class="one_div">
									<img src="../../icon/icon_course_time.png" />
									<p class="CourseAnalysis_chart_title">
										78分
									</p>
									<p class="CourseAnalysis_chart_info">
										实践成绩
									</p>
								</div>
							</div>
						</div>
						<div class="LearningEffect_OneChart">
							<p class="chart_title padding_abscissa_5">
								<span>10次作业提交5次,平均得分68分,《作业1》得分最高,《作业2》得分最低</span>
							</p>
							<div class="LearningEffect_OneChart_div" id="LearningEffect_OneChart"></div>
						</div>
						<div class="LearningEffect_OneChart">
							<p class="chart_title padding_abscissa_5">
								<span>10次测验提交5次,平均得分68分,《测验1》得分最高,《测验2》得分最低</span>
							</p>
							<div class="LearningEffect_OneChart_div" id="LearningEffect_TwoChart"></div>
						</div>
						<div class="LearningEffect_OneChart">
							<p class="chart_title padding_abscissa_5">
								<span>10次评价参加5次,平均得分68分,《评价1》得分最高,《评价2》得分最低</span>
							</p>
							<div class="LearningEffect_OneChart_div" id="LearningEffect_ThreeChart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/echarts.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/KnowledgeBook.js"></script>
	<script type="text/javascript">
		apiready = function() {
		}
		window.onload = function() {
			setOneMiddleChart()
			setOneBottomChart();
			setTwoTopChart();
			setTwoMiddleChart()
			setAttendanceChart();
			setClassroomOneChart();
			setClassroomTwoChart()
			setClassroomThreeChart()
			setLearningOneChart()
			setLearningTwoChart()
			setLearningThreeChart()
			setLearningEffectOneChart()
			setLearningEffectTwoChart()
			setLearningEffectThreeChart()
			tabswitch(1);
			tabswitch2(5);
		}
		function setLearningEffectOneChart() {
			var myChart = echarts.init(document.getElementById('LearningEffect_OneChart'));
			myChart.setOption({
				tooltip : {
					trigger : 'axis',
					axisPointer : {// 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend : {
					icon : 'circle',
					itemWidth : 10,
					itemHeight : 10,
					data : ['我的得分', '平均分']
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [{
					type : 'category',
					data : ['作业一', '作业二', '作业三', '作业四', '作业五', '作业六', '作业七'],
					axisLabel : {
						interval : 0,
						rotate : 40
					}
				}],
				yAxis : [{
					name : '作业名称/分数',
					type : 'value'
				}],
				series : [{
					name : '我的得分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [120, 132, 101, 134, 90, 230, 210],
					itemStyle : {
						normal : {
							color : "#ff66cc"
						}
					},
				}, {
					name : '平均分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [220, 182, 191, 234, 290, 330, 310],
					itemStyle : {
						normal : {
							barBorderRadius : [30, 30, 0, 0],
							color : "#19b4ed"
						}
					},
				}]
			});
		}

		function setLearningEffectTwoChart() {
			var myChart = echarts.init(document.getElementById('LearningEffect_TwoChart'));
			myChart.setOption({
				tooltip : {
					trigger : 'axis',
					axisPointer : {// 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend : {
					icon : 'circle',
					itemWidth : 10,
					itemHeight : 10,
					data : ['我的得分', '平均分']
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [{
					type : 'category',
					data : ['测验一', '测验二', '测验三', '测验四', '测验五', '测验六', '测验七'],
					axisLabel : {
						interval : 0,
						rotate : 40
					}
				}],
				yAxis : [{
					name : '作业名称/分数',
					type : 'value'
				}],
				series : [{
					name : '我的得分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [120, 132, 101, 134, 90, 230, 210],
					itemStyle : {
						normal : {
							color : "#99cc33"
						}
					},
				}, {
					name : '平均分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [220, 182, 191, 234, 290, 330, 310],
					itemStyle : {
						normal : {
							barBorderRadius : [30, 30, 0, 0],
							color : "#ac76fc"
						}
					},
				}]
			});
		}

		function setLearningEffectThreeChart() {
			var myChart = echarts.init(document.getElementById('LearningEffect_ThreeChart'));
			myChart.setOption({
				tooltip : {
					trigger : 'axis',
					axisPointer : {// 坐标轴指示器，坐标轴触发有效
						type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				legend : {
					icon : 'circle',
					itemWidth : 10,
					itemHeight : 10,
					data : ['我的得分', '平均分']
				},
				grid : {
					left : '3%',
					right : '4%',
					bottom : '3%',
					containLabel : true
				},
				xAxis : [{
					type : 'category',
					data : ['评价一', '评价二', '评价三', '评价四', '评价五', '评价六', '评价七'],
					axisLabel : {
						interval : 0,
						rotate : 40
					}
				}],
				yAxis : [{
					name : '作业名称/分数',
					type : 'value'
				}],
				series : [{
					name : '我的得分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [120, 132, 101, 134, 90, 230, 210],
					itemStyle : {
						normal : {
							color : "#f47878"
						}
					},
				}, {
					name : '平均分',
					type : 'bar',
					stack : '广告',
					barWidth : '30%',
					data : [220, 182, 191, 234, 290, 330, 310],
					itemStyle : {
						normal : {
							barBorderRadius : [30, 30, 0, 0],
							color : "#ff9900"
						}
					},
				}]
			});
		}

		function tabswitch(index) {
			$('.indicator').attr('style', 'display:none;');
			$('.col').attr('style', 'color:#323232;');
			$('#col' + index).attr('style', 'color:#18b4ed;');
			$('#indicator' + index).attr('style', 'display:block;');
			$('.mui-control-content').removeClass('mui-active');
			$('#item' + index).addClass('mui-active');
			$('#indicator' + index).attr('style', 'display:block;');
		}

		function tabswitch2(index) {
			$('.indicator2').attr('style', 'display:none;');
			$('.col2').attr('style', 'color:#323232;');
			$('#col2' + index).attr('style', 'color:#18b4ed;');
			$('#indicator2' + index).attr('style', 'display:block;');
			$('.mui-control-content').removeClass('mui-active');
			$('#item2' + index).addClass('mui-active');
			$('#indicator2' + index).attr('style', 'display:block;');
		}
	</script>
</html>